
<html>
<head>
    <title>常用指令：v-for</title>
    <script src="js/vue.js"></script>
    <script>
        window.onload = function() {
            new Vue({
                el: '#itany',
                data: {
                    arr: [12, 4, 5, 34, 2, 11], 
                    arr2: [12, 4, 5, 34, 2, 11, 12], 
                    user: {id: 9527, name: '唐伯虎', age: 25},
                    users: [
                        {id: 9527, name: '唐伯虎', age: 25},
                        {id: 1001, name: '秋香', age: 22},
                        {id: 1002, name: '石榴姐', age: 24},
                        {id: 1003, name: '小强', age: 1},
                    ]
                }
            }); 
        }
    </script>
</head>
<body>
    <div id="itany">
        {{arr}}

        <!-- 普通循环 -->
        <ul>
            <li v-for="value in arr">{{value}}</li>
        </ul>
        <ul>
            <li v-for="value in user">{{value}}</li>
        </ul>
        <!-- 键值对循环-->
        <ul>
            <li v-for="(v, k) in user">{{k}} = {{v}}</li>
        </ul>
        <!-- 循环包含重复数据的集合 -->
        <ul>
            <li v-for="(v, k) in arr2">{{k}} = {{v}}</li>
        </ul>
        <!-- 冒号key: 该属性绑定唯一key，当更新元素时
             可重用元素，提高效率，类似于vue1.0中的
             track-by 
        -->
        <ul>
            <li v-for="(v, k) in arr2" :key="k">{{k}} = {{v}}</li>
        </ul>
        <!-- 对象数组的遍历 -->
        <ul>
            <li v-for="(user, index) in users">
                {{index + 1}}, {{user.id}},  {{user.name}}, {{user.age}}
            </li>
        </ul>
        <!-- 你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法 -->
        <ul>
            <li v-for="(user, index) of users">
                {{index + 1}}, {{user.id}},  {{user.name}}, {{user.age}}
            </li>
        </ul>
    </div>
</body>
</html>
